<template>
	<view class="content">
		<view class="tips">
			提醒：请如实填写您要曝光的信息，不得恶意编造。
		</view>
		<view class="table">
			<view class="table-item">
				<view class="table-item-nik">
					<span>* 曝光类型</span>
					<view class="table-item-right">
						<view :class="userData.type !== 1?'item-right':'item-right2'" @click="userData.type = 1">恶意送养</view>
						<view :class="userData.type !== 2?'item-right':'item-right2'" @click="userData.type = 2">恶意领养</view>
						<view :class="userData.type !== 3?'item-right':'item-right2'" @click="userData.type = 3">欺诈骗钱</view>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>* 真实姓名</span>
					<view class="item-text">
						<input type="text" v-model="userData.name" placeholder="被曝光人姓名"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>* 地区</span>
					<view class="item-text">
						<input type="text" v-model="userData.city" placeholder="被曝光人所在地"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>手机号</span>
					<view class="item-text">
						<input type="text" v-model="userData.phone" placeholder="被曝光人手机号码"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>微信号/QQ/微博/闲鱼</span>
					<view class="item-text">
						<input type="text" v-model="userData.socialAccount" placeholder="被曝光人社交帐号"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-item-text">
					<span>身份证号</span>
					<view class="item-text">
						<input type="text" v-model="userData.idCard" placeholder="被曝光人身份证号码"/>
					</view>
				</view>
			</view>
			<view class="table-item">
				<view class="table-cloum">
					<span>* 聊天截图</span>
					<u-upload :custom-btn="true" ref="uUpload" :action="action" :multiple="false" :show-tips="false" @on-uploaded="uploaded" @on-remove="onRemove" :auto-upload="false" max-count="5" @on-list-change="choose" :formData="formData" :header="header">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="../../../static/img/tupsc.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="table-item">
				<view class="table-cloum">
					<span>视频证据</span>
					<view class="addPload-waik">
						<view class="addPload" v-for="(item,index) in srcList" :key="index">
							<view class="addItems">
								<view class="addItems-icon" @click="delVideo(index)"><u-icon name="close" color="#FFFFFF" size="38"></u-icon></view>
								<video :src="item" id="video_play" @play="playVedio"></video>
							</view>
						</view>
						<view class="addItem" @click="test" v-if="srcList.length < 3">
							<u-icon name="plus" color="#f2f2f2" size="80"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="table-item" style="margin-bottom: 200rpx;">
				<view class="table-cloum">
					<span>* 事件陈述</span>
					<textarea v-model="userData.reason" placeholder="请详细陈述具体事件的过程..." />
				</view>
			</view>
			<view class="button">
				<u-button type="primary" class="styleCss"  hover-class="none" shape="circle" @click="setData">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			srcList: [],
			formData: {
				file: '1',
				fileName: ''
			},
			action: this.commonApi.petAvatar,
			userData:{
				type: 1,
				name: undefined,
				city: undefined,
				images: undefined,
				phone: undefined,
				socialAccount: undefined,
				idCard: undefined,
				reason: undefined,
				videos: undefined
			}
		}
	},
	methods:{
		delVideo(i){
			this.srcList.splice(i,1)
			this.userData.videos = this.srcList.toString()
		},
		choose(e,name){
			console.log(e,name)
			for(let i=0;i<e.length;i++){
				this.formData = {
					file: e[i].url,
					fileName: e[i].url
				}
				this.$nextTick(function(){
					this.$refs.uUpload.upload()
				})
			}
		},
		uploaded(lists){
			let data = []
			lists.forEach(item=>{
				data.push(item.response.data)
			})
			this.userData.images = data.toString()
		},
		onRemove(index, lists){
			console.log('图片已被移除')
		},
		test() {
			var self = this;
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera', 'album'],
				success: function (res) {
					if(self.srcList.length < 3){
						uni.uploadFile({
							url: self.commonApi.petAvatar,
							fileType: 'video',
							name: 'file',
							formData: {
								file: '1',
								fileName: res.tempFilePath
							},
							filePath: res.tempFilePath,
							header:{
								"token": uni.getStorageSync('token')
							},
							success(res) {
								let data = JSON.parse(res.data)
								self.srcList.push(data.data)
								self.userData.videos = self.srcList.toString()
							}
						})
					}else{
						uni.showToast({
							title: '视频上传限制3个视频',
							duration: 1500,
							icon: 'none'
						})
					}
				}
			});
		},
		testPhone(str) {
			const reg = /^1[3|4|5|7|8|6|9][0-9]\d{8}$/;
			return reg.test(str);
		},
		isCardNo(card){
		   // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
		   let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		   if(reg.test(card) === false){
		       return false;
		   }else{
			   return true;
		   }
		},
		setData(){
			if(!this.userData.name){
				uni.showToast({
					title:'姓名不能为空',
					duration:1500,
					icon: 'none'
				})
				return false
			}
			if(!this.userData.city){
				uni.showToast({
					title:'地区不能为空',
					duration:1500,
					icon: 'none'
				})
				return false
			}
			if(!this.userData.images){
				uni.showToast({
					title:'聊天截图不能为空',
					duration:1500,
					icon: 'none'
				})
				return false
			}
			if(!this.userData.reason){
				uni.showToast({
					title:'事件陈述不能为空',
					duration:1500,
					icon: 'none'
				})
				return false
			}
			if(this.userData.phone){
				if(!this.testPhone(this.userData.phone)){
					uni.showToast({
						title:'手机号有误',
						duration:1500,
						icon:'none'
					})
					return false
				}
			}
			if(this.userData.idCard){
				if(!this.isCardNo(this.userData.idCard)){
					uni.showToast({
						title:'身份证号码不正确',
						duration:1500,
						icon: 'none'
					})
					return false
				}
			}
			this.$request(this.commonApi.exposureAdd,'POST',this.userData,'application/json').then(res=>{
				uni.showToast({
					title:'曝光成功',
					duration:1500,
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				},500)
			})
		}
	},
	mounted() {
	}
};
</script>

<style lang="scss" scoped>
	.slot-btn{
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f2f2f2;
		margin-left: 15rpx;
	}
	.addItems-icon{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		background: red;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
	}
	.addPload-waik{
		width: 100%;
		min-height: 210rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: -20rpx;
		padding-bottom: 10rpx;
		.addItem{
			width: 210rpx;
			height: 210rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			border: 2px dashed #f2f2f2;
			margin-right: 20rpx;
			margin-top: 20rpx;
			
		}
	}
	.addPload{
		width: 210rpx;
		min-height: 210rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 20rpx;
		margin-top: 20rpx;
		.addItems{
			width: 210rpx;
			height: 210rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			// padding: 2px 0;
			video{
				width: 210rpx;
				height: 210rpx;
				border-radius: 20rpx;
			}
		}
		
	}
	.styleCss{
		width: 660rpx;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 1;
	}
	.table-cloum{
		width: 700rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
		span{
			width: 100%;
			padding: 35rpx 0 25rpx 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
		}
		textarea{
			width: 660rpx;
			height: 160rpx;
			background: #f6f6f6;
			padding: 20rpx;
			border-radius: 20rpx;
		}
	}
	.item-text{
		width: calc(100% - 310rpx);
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		input{
			width: 400rpx;
			text-align: right;
		}
	}
	.table-item-text{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		span{
			width: 310rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.item-right2{
		background: #FFCC00;
		color: white;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	.item-right{
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #5A5A5A;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.table-item-right{
		width: calc(100% - 180rpx);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.table-item-nik{
		width: 700rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		span{
			width: 180rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.table-item{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		background: white;
		border-bottom: 1px solid #f2f2f2;
	}
	.table{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #f2f2f2;
		padding-top: 10rpx;
	}
	.tips{
		width: 100%;
		padding: 20rpx;
		background: #fff9ec;
		line-height: 45rpx;
		font-size: 28rpx;
		color: #e6c062;
	}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
